﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/Common/layim/dist/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <div style="width: 100%;display: flex">
            <div style="width: 20%">
                <ul>
                    <li v-for="menu in menus" :key="menu.path">
                        <router-link :to="menu.path">{{menu.name}}</router-link>
                    </li>
                </ul>
            </div>
            <div style="width: 80%">
                <router-view></router-view>
            </div>
        </div>
    </div>
    <script src="/Common/layim/dist/layui.all.js"></script>
    <script>
        layui.config({
            base: 'Common/layim/layui_exts/' //指定 winui 路径 //假设这是cookie.js所在的目录（本页面的相对路径）
        }).extend({ //设定模块别名
            Vue: 'Vue'
            // Router: 'router'//  如果js是在根目录，也可以不用设定别名,因为我js的是在根目录，所以这句话其实也不用写也行。
            , VueRouter: 'VueRouter', httpVueLoader:'httpVueLoader'
        });
        layui.use(['jquery', 'Vue', 'VueRouter','httpVueLoader'], function () {

            var $ = layui.jquery, Vue = layui.Vue, VueRouter = layui.VueRouter, httpVueLoader = layui.httpVueLoader;

            Vue.config.devtools.debug = true;
            const menus = [
                {
                    name: "首页",
                    path: "/index",
                    component: "/test/mian.html",
                },
                {
                    name: "后台",
                    path: "/admin",
                    component: "/test/mian.html",
                },    // 重定向
            {
                path: '/admin',
                    redirect: '/mian',
                    component: "/test/mian.html"
                }
            ];
            let routes = [];
            for (let menu of menus) {
                console.log(menu.component);
                routes.push({
                    path: menu.path,
                    component: httpVueLoader(menu.component)
                });
            }
            const router = new VueRouter({
                routes: routes,
            });
            Vue.use(httpVueLoader);
            new Vue({
                router: router,
                el: '#app',
                data: {
                    menus: menus,
                },
            })
        });
    </script>
</body>


</html>